import React, { useEffect, useState }  from 'react';

import { Engine, Composites, Runner, World, Render, Body, Bodies, MouseConstraint} from 'matter-js';

import styles from './index.less';

const offDutyCountdown: React.FC = () => {

  const [content, setContent] = useState('')

  // please dont look at this hot mess
  // $('body').append('<div id="clock"></div>');

  // const content = () => {
  //   <div id={"clock"}>11</div>
  // }
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    // 使用 document.getElementById 获取元素的引用
    const container = document.getElementById('clock');
    setContent(container);
  }, []);

  const {innerWidth, innerHeight} = window;
  const start = new Date(),
    sec = start.getSeconds(),
    min = start.getMinutes() * 60 + sec,
    hour = start.getHours() % 12 * 3600 + min,
    sW = innerWidth/2,
    sH = innerWidth/2;
  // const Engine = Matter.Engine,
  //   Composites = Matter.Composites,
  //   Runner = Matter.Runner,
  //   Mouse = Matter.Mouse,
  //   Events = Matter.Events,
  //   World = Matter.World,
  //   Common = Matter.Common,
  //   Vertices = Matter.Vertices,
  //   Composite = Matter.Composite,
  //   Constraint = Matter.Constraint,
  //   Render = Matter.Render,
  //   Body = Matter.Body,
  //   Bodies = Matter.Bodies;
  const engine = Engine.create(content);
  const render = Render.create({
    element: content,
    engine: engine,
    options: {
      width: sW,
      height: sH,
      wireframes: false,
      showAngleIndicator: false,
      showCollisions: false,
      showVelocity: false
    }
  });
  Render.run(render);
  const hourHand = addRect({ x: sW/2, y: sH/2 , w: 15, h: sW - 20,
    options: {
      angle: 0,
      density: 4,
      isStatic: true,
      friction: 1,
      frictionStatic: 10,
      render: {
        fillStyle: 'black',
        strokeStyle: 'black',
        lineWidth: 10
      }} });
  const minuteHand = addRect({ x: sW/2, y: sH/2 , w: 15, h: sW - 20,
    options: {
      angle: 0,
      density: 4,
      isStatic: true,
      friction: 1,
      frictionStatic: 10,
      render: {
        fillStyle: 'black',
        strokeStyle: 'black',
        lineWidth: 6
      }} });
  const secondHand = addRect({ x: sW/2, y: sH/2 , w: 15, h: sW - 20,
    options: {
      angle: 0,
      density: 4,
      isStatic: true,
      friction: 1,
      frictionStatic: 10,
      render: {
        fillStyle: 'black',
        strokeStyle: 'black',
        lineWidth: 3
      }} });
  const options = {
    restitution: 1,
  }
  // 圆形形
  const shapeAmount = 12;
  const shapeSize = sW/40;
  let stack = Composites.stack(sW/2 - (shapeAmount/2 * shapeSize),sH/2 - (shapeAmount/2 * shapeSize), shapeAmount/2,shapeAmount/2, 0, 0, function(x = 0, y = 0) {
    return Bodies.circle(x, y, shapeSize, {
      restitution: 0,
      density:.05,
      friction: 1,
      frictionStatic: 10,
      options: options,
      render: {
        //fillStyle: 'black',
        strokeStyle: 'white',
        lineWidth:0
      }
    });
  });
  World.add(engine.world, stack);
  // 长方形
  stack = Composites.stack(sW/2 - (shapeAmount/2 * shapeSize),sH/2 - (shapeAmount/2 * shapeSize), shapeAmount/2,shapeAmount/2, 0, 0, function(x = 0, y = 0) {
    return Bodies.rectangle(x, y, shapeSize*2, shapeSize, {
      restitution: 0,
      density:.05,
      friction: 1,
      frictionStatic: 10,
      options: options,
      render: {
        //fillStyle: 'black',
        strokeStyle: 'white',
        lineWidth:0
      }
    });
  });
  World.add(engine.world, stack);
  // 三角形
  stack = Composites.stack(sW/2 - (shapeAmount/2 * shapeSize),sH/2 - (shapeAmount/2 * shapeSize), shapeAmount/2,shapeAmount/2, 0, 0, function(x = 0, y = 0) {
    return Bodies.polygon(x, y, 3, shapeSize, {
      restitution: 0,
      density:.05,
      friction: 1,
      frictionStatic: 10,
      options: options,
      render: {
        //fillStyle: 'black',
        strokeStyle: 'white',
        lineWidth:0
      }
    });
  });
  World.add(engine.world, stack);
  engine.world.gravity.x = 0;
  engine.world.gravity.y = .5;
  render.options.background = '#ffffff';
  const m = Math.min(sW, sH);
  const rat = 1 / 4.5 * 2;
  const r = m * rat;
  const parts = [];
  const pegCount = 64;
  const TAU = Math.PI * 2;
  for(let i = 0; i < pegCount; i++) {
    const segment = TAU / pegCount;
    const angle2 = i / pegCount * TAU + segment / 2;
    const x2 = Math.cos(angle2);
    const y2 = Math.sin(angle2);
    const cx2 = x2 * r + sW/2;
    const cy2 = y2 * r + sH/2;
    const rect = addRect({ x: cx2, y: cy2, w: 10 / 1000 * m, h: 400 / 1000 * m, options: { angle: angle2, isStatic: true, density: 1, render:{
          fillStyle: 'white',
          strokeStyle: 'white',
          lineWidth: 0
        }  } });
    parts.push(rect);
  }


  // 全局鼠标约束
  const mouseConstraint = MouseConstraint.create(engine, {});
  World.add(engine.world, mouseConstraint);

  function addBody({bodies}: { bodies?: any[] }) {
    if (bodies != null) World.add(engine.world, ...bodies);
  }

  function addRect({ x = 0, y = 0, w = 10, h = 10, options = {} } = {}) {
    const body = Bodies.rectangle(x, y, w, h, options);
    addBody({bodies: [body]});
    return body;
  }

  const runner = Engine.run(engine);
  hourHand.vertices[0].x = -1;
  hourHand.vertices[0].y = 0;
  hourHand.vertices[1].x = -5;
  hourHand.vertices[1].y = 0;
  Body.scale(hourHand, .3, .2);
  Body.setVertices(hourHand, hourHand.vertices);
  minuteHand.vertices[0].x = -1;
  minuteHand.vertices[0].y = 0;
  minuteHand.vertices[1].x = -5;
  minuteHand.vertices[1].y = 0;
  Body.scale(minuteHand, .4, .3);
  Body.setVertices(minuteHand, minuteHand.vertices);
  secondHand.vertices[0].x = -1;
  secondHand.vertices[0].y = 0;
  secondHand.vertices[1].x = -5;
  secondHand.vertices[1].y = 0;
  Body.scale(secondHand, .4, .4);
  Body.setVertices(secondHand, secondHand.vertices);
  function draw() {
    const now = new Date(),
    diff = Math.abs(start.getTime() - now.getTime()) / 1000,
    degS = (sec + diff) / 60 * 360,
    degM = (min + diff) / 3600 * 360,
    degH = (hour + diff) / 43200 * 360;
    Body.setAngle(hourHand, degH * Math.PI / 180);
    Body.setAngle(minuteHand, degM * Math.PI / 180);
    Body.setAngle(secondHand, (degS * Math.PI) / 180);
    requestAnimationFrame(draw);
  }

  draw();
  const resetBounds = function(){
    Runner.stop(runner);
    Runner.stop(engine);
  //TweenMax.killAll();
  //$('#engine canvas').remove();
  //cancelAnimationFrame($logoMove);
  //setupClock();
  };
  let rtime;
  let timeout = false;
  const delta = 200;

  window.onresize= function() {
    rtime = new Date();
    if (timeout === false) {
      timeout = true;
      setTimeout(resizeend, delta);
    }
  };

  function resizeend() {
    if (new Date() - rtime < delta) {
      setTimeout(resizeend, delta);
    } else {
      timeout = false;
      resetBounds();
    }
  }

  return (
    <div id="clock"/>
  )


};

export default offDutyCountdown;



